import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import {Form,Button,Input,Toast} from 'antd-mobile'
import {reqregister} from '../../request/api'
export default class Register extends Component {
    constructor(){
        super();
        this.state={
            user:{
                phone:'',
                password:"",
                nickname:''
            }
        }
    };
    register=()=>{
        reqregister(this.state.user).then(d=>{
            if(d.data.code === 200){
                Toast.show({
                    content:d.data.msg
                })
                this.props.history.push("/login")
            }else{
                Toast.show({
                    content:d.data.msg
                })
            }
            
        })
    };
    render() {
        const { user } = this.state;
        return (
            <div>
                <Header title="注册" back></Header>
                <Form layout="horizontal">
                    <Form.Item label='手机号'>
                        <Input placeholder='请输入手机号' clearable 
                        onChange={(e) => this.setState({ user: { ...user, phone: e } })}/>
                    </Form.Item>

                    <Form.Item label='昵称'>
                        <Input placeholder='请输入昵称' clearable 
                        onChange={(e)=>this.setState({user:{...user,nickname:e}})}/>
                    </Form.Item>

                    <Form.Item label='密码'>
                        <Input placeholder='请输入密码' clearable 
                        onChange={(e)=>this.setState({user:{...user,password:e}})}/>
                    </Form.Item>
                </Form>
                <div className="text-center">
                    <Button color="primary" onClick={this.register}>注册</Button>
                </div>
            </div>
        )
    }
}
